<script setup lang="ts">
import { type Persons } from '@/types'
import { withDefaults } from 'vue'
import usePerson from '@/hooks/usePerson'
let { person, name, id, age, personList } = usePerson()

// defineProps<{
//   msg: string
// }>()
// 限制类型+限制必要性+指定默认值+函数返回有对象
withDefaults(defineProps<{ list?: Persons; msg?: string }>(), {
  list: () => [
    {
      name: 'a',
      age: 12,
      id: '1',
    },
  ],
})
</script>

<template>
  <h4>reactive泛型 ，toRefs</h4>
  <p>toRefs-age ：{{ age }}</p>
  <p>toRefs-id： {{ id }}</p>
  <p>toRefs-name ：{{ name }}</p>
  <p>PersonInter： {{ person }}</p>
  <p>personList:{{ personList }}</p>
  <hr />

  <h4>defineProps，defineProps泛型</h4>
  <p class="green">限制类型+限制必要性+指定默认值+函数返回有对象</p>
  <p>{{ msg }}</p>
  <br />
  <hr />
</template>
